<template>
  <div class="content-div">
    <div class="login-win">
      <span class="win-title">手机快捷登录</span>
      <van-form :label-width="0" @submit="onSubmit">
        <van-field
          class="login-input"
          readonly
          clickable
          v-model="form.userType"
          placeholder="点击选择身份"
          @click="showPicker = true"
          :rules="[{ required: true, message: '请选择身份' }]"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          class="login-input"
          v-model="form.tel"
          type="text"
          placeholder="请输入手机号码"
          :rules="[{ required: true, message: '请输入手机号码' }]"
        />
        <van-field
          class="login-input"
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
          right-icon="eye-o"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
        <div class="forget-box">
          <span>还没有账号？</span>
          <span @click="toRegister" style="color: #1989fa;">去注册</span>
          <!-- <span>忘记密码</span> -->
        </div>
        <van-button class="login-btn" round block type="info" native-type="submit">登录</van-button>
        <div class="policy-box">
          <span>已阅读并同意</span>
          <span @click="$router.push('/policy?pageType=1')">《用户协议》</span>
          <span>与</span>
          <span @click="$router.push('/policy?pageType=2')">《隐私政策》</span>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'index',
  data () {
    return {
      form: {
        tel: '',
        password: ''
      },
      showPicker: false,
      columns: ['会员', '陪诊师']
    }
  },
  created () {
    if (this.$store.state.user.token && this.$store.state.user.severUserInfo && this.$store.state.user.severUserInfo.member_id) {
      this.$router.replace('/home')
    }
  },
  methods: {
    onConfirm (value, index) {
      this.form.userType = value
      this.showPicker = false
    },
    onSubmit () {
      this.$store.dispatch('userLogin', {
        ...this.form,
        userType: this.form.userType === '会员' ? '1' : '2'
      }).then(res => {
        let path = this.form.userType === '会员' ? '/home' : '/home-waiter' // 根据不同类型跳转到不同首页
        Toast.success('登录成功！')
        this.$router.replace(path)
      }).catch(err => {
        console.log(err)
      })
    },
    toRegister () {
      this.$router.replace('/register')
    }
  },
  mounted () {}
}
</script>

<style scoped lang="less">
  .content-div{
    width: 100%;
    height: 100vh;
    padding-top: 190px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url('http://diagnosisdl.lngov.top/webhdfs/v1/medical/banner/images/轮播图片1704184525797_4148547092.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0');
    // background: linear-gradient(145deg,rgba(111, 57, 57, 0.07),hsla(0,0%,100%,.12) 35%,rgba(0,212,235,.1));
    .login-win{
      width: 280px;
      margin: 0 auto;
      background-color: #FFFFFF;
      border-radius: 10px;
      padding: 30px 20px;
      box-sizing: border-box;
      .win-title{
        font-size: 14px;
        font-weight: bolder;
      }
      .login-input{
        padding: 20px 0 0 0;
      }
      /deep/.van-cell::after{
        left: 0;
        right: 0;
      }
      .login-btn{
        margin-top: 14px;
        height: 34px;
        line-height: 34px;
        border-radius: 10px;
      }
      /deep/.van-field__control, /deep/.van-field__error-message{
        padding: 5px;
      }
      /deep/.van-field__error-message{
        display: none;
      }
      .forget-box{
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-size: 12px;
        color: darkgrey;
        padding-top: 30px;
      }
      .policy-box{
        font-size: 10px;
        color: #999999;
        padding-top: 10px;
        span:nth-child(even){
          color: #1989fa;
        }
      }
    }
  }
</style>
